<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body custom-class="import-dialog">
      <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="外开门记录" name="external-open-record"></el-tab-pane>
          <el-tab-pane label="内开门记录" name="internal-open-record"></el-tab-pane>
          <el-tab-pane label="冻结/解冻记录" name="freeze-record"></el-tab-pane>
<!--          <el-tab-pane label="人脸信息" name="face-info"></el-tab-pane>-->
        </el-tabs>
        <div class="table-container">
          <component :is="activeName" :data="data" v-if="visible" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ExternalOpenRecord from './components/external-open-record.vue'
import InternalOpenRecord from './components/internal-open-record.vue'
import FreezeRecord from './components/freeze-record.vue'
// import FaceInfo from './components/face-info.vue'


export default {
  components: {
    ExternalOpenRecord,
    InternalOpenRecord,
    FreezeRecord,
    // FaceInfo
  },
  props: {
    title: {
      default: '开门权限'
    },
    value: {
      default: false
    },
    data: {
      default: undefined
    }
  },
  data() {
    return {
      activeName: 'external-open-record',
      // 表单数据
      //表单
      form: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
    },
    reset() {
      this.activeName = 'external-open-record'
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.list = []
      this.total = 0
      this.resetForm('form')
    },
    // 处理点击事件
    handleClick(tab) {
      this.reset()
      this.activeName = tab.name
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog";
</style>
